<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Book Detail</title>
<!--  <link type="text/css" rel="stylesheet" href="../css/detail.css">-->
  <link type="text/css" rel="stylesheet" href="./css/detail.css">
<!--  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
  <link rel="stylesheet" href="./resoures/element-ui/index.css">
<!--  <script src="../resoures/vue.js"></script>-->
  <script src="./resoures/vue.js"></script>
  <!-- import JavaScript -->
<!--  <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
  <script src="./resoures/element-ui/index.js"></script>
  <!-- 引入axios -->
<!--  <script src="../resoures/axios.min.js"></script>-->
  <script src="./resoures/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <div class="indexHead">

      <div class="catalogueLogo">
        <img src="./img/logo.png" height="70px">
      </div>
      <div class="title">
        网上书城
      </div>
      <div class="indexHeadText" style="margin-top: 40px;">
        <a href="/index.html" class="indexHeadTextA" >首页</a>
        <a href="/classifcation.html" class="indexHeadTextA" >图书分类 </a>
        <a href="/page/register.html" class="indexHeadTextA" v-if="!login">免费注册</a>
        <a href="/page/login.html" class="indexHeadTextA" v-if="!login">请先登录</a>
        <a href="/shoping.html" class="indexHeadTextA" v-if="login">购物车</a>
        <a href="/order.html" class="indexHeadTextA" v-if="login">我的订单</a>
        <div style="width: 200px"></div>
<!--        已登录后展示的退出按钮-->
        <a href="/index" class="indexHeadTextA" v-if="login" style="color: red" @click="quit">用户名:{{login_username}} ,点此退出登录</a>
      </div>
    </div>
    <hr style="margin-top: 40px;">
    <div class="content">
      <div class="bookl">
        <div class="book1H">
        <p class="book1HP">图书类型</p>
        </div>
        <div class="booklImg">
        <img src="//img3m9.ddimg.cn/10/24/25157989-1_w_8.jpg" style="width: 100%;height: 100%;">
        </div>
      </div>
      <div class="bookt">
        <div class="bookt01">
          <!-- <div class="bookname">
            <p style="font-size: 24px;">图书名称{{this.book.name}}</p>
            <p style="width: 660px;height: 20px; font-size: 13px; ">作者：</p>
          </div> -->
          <div class="bookname" style=" overflow: hidden; text-overflow: ellipsis;">
            图书名称:{{book.name}}
          </div>
          <div class="bookauthor">作者:{{book.author}} </div>
        </div>
        <div class="bookt02">
          <div class="left">
            <p style="font-size: 15px; ">价格:￥{{book.price}}</p>
            <el-button type="primary" round @click="addshoping">添加购物车</el-button>
            <el-button type="danger" round @click="buy">购买</el-button>
          </div>
        </div>
        <div class="bookt03">
          <div class="bookt03text" style="height: 100%; overflow: hidden; text-overflow: ellipsis;">图书简介:{{book.description}}</div>
        </div>
      </div>
      <!-- 其他详细信息 -->
    </div>
    
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        book: {},
        login:false,
        login_username:'',
      },
      mounted() {
        // 获取 URL 参数中的图书名称
        const params = new URLSearchParams(window.location.search);
        const id = params.get('id');
        alert(id)
        let _this = this;
        axios({
          method: "GET",
          url: "/bookDetail",
          params: {
            id: id
          }
        }).then(res => {
          // console.log(bookDetail)
          _this.book = res.data;
          console.log(_this.book)
        })
        //判断登陆状态 首先获取名为"Linusername"的会话存储数据
        if (this.checkLogin()){
          this.login = true
          this.login_username = sessionStorage.getItem("Linusername")
        }
      },

      methods:{
        //判断登录状态
        checkLogin(){
          let token = sessionStorage.getItem("Linusername");
          return token !== null && token !== undefined;
        },
        //退出登录状态的事件
        quit(event){
          event.preventDefault();
          // 执行自定义逻辑
          alert("退出成功！")
          sessionStorage.removeItem("Linusername");
          location.href ="/index";
        },
        open1() {
          this.$notify({
            title: '成功',
            message: '已添加到购物车',
            type: 'success'
          });
        },
        addshoping() {
          if (this.checkLogin()){
            //登录后的操作
            let _this = this;
            axios({
              method: "GET",
              url: "/addshoping",
              params: {
                id: _this.book.id,
                username:_this.login_username
              }
            }).then(res => {
              // 判断响应中的 code 值是否为 1
              if (res.data.code === 1) {
                // 操作成功，进行相应的处理
                _this.open1();
              } else {
                // 操作失败，进行相应的处理
                alert("失败")
              }
            })
          }else {
            //未登录的提示
            // 未登录时显示警告框
            this.$alert('您还未登录，请先登录', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                // 点击确定按钮后的回调函数，可以不写
              }
            });
          }
        },
        buy(){
          if (this.checkLogin()){
            //登录后的操作
          }else {
            //未登录的提示
            // 未登录时显示警告框
            this.$alert('您还未登录，请先登录', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                // 点击确定按钮后的回调函数，可以不写
              }
            });
          }
        }
      }
    });
  </script>
</body>
</html>